<template>
  <view class="groupSettings">
    <topTitle title="聊天設置" />
    <view class="com">
      <view class="groupList">
        <view @tap="goTo('/pages/group/groupMembers?chatId=' + chatId)">
          <view>群成员（{{ groupInfo.member?.length }}）</view>
          <view>全部</view>
        </view>
        <view class="avatarList">
          <view
            v-for="(item, idx) in groupInfo.member"
            :key="idx"
            v-show="idx <= (isGroupLeader ? 7 : 8)"
          >
            <up-avatar
              class="avatar"
              mode="aspectFill"
              :src="item.picture"
              size="50"
            ></up-avatar>
            <view>{{ item.notes || item.nick_name }}</view>
          </view>
          <view>
            <image
              @tap="goInitiateGroupChat(2)"
              class="avatar"
              src="@/static/image/60.png"
              mode="widthFix"
            />
          </view>
          <view v-if="isGroupLeader">
            <image
              @tap="goInitiateGroupChat(3)"
              class="avatar"
              src="@/static/image/59.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
      <view class="groupInfo">
        <view
          @click="
            group_name = groupInfo.group_name;
            groupNameShow = true;
          "
        >
          <view>群聊名称</view>
          <view>{{ groupInfo.group_name }}</view>
        </view>
        <view>
          <view>
            <view>群公告</view>
            <view class="announcement">暂定</view>
          </view>
        </view>
        <view>
          <view>查找聊天内容</view>
        </view>
      </view>
      <view class="groupInfo">
        <view class="switch">
          <view>置顶聊天</view>
          <up-switch
            v-model="topChat"
            @change="topChatChange"
            activeColor="#34C759"
          ></up-switch>
        </view>

        <view class="switch">
          <view>消息免打扰</view>
          <up-switch
            v-model="messageWithoutInterruption"
            @change="messageWithoutInterruptionChange"
            activeColor="#34C759"
          ></up-switch>
        </view>
        <view>
          <view>清空聊天记录</view>
        </view>
      </view>
      <view class="btn">
        <up-button
          @tap="GroupDisbandFn"
          v-if="isGroupLeader"
          text="解散该群聊"
          type="primary"
        ></up-button>
        <up-button
          @tap="GroupExitFn"
          v-else
          text="退出该群聊"
          type="primary"
        ></up-button>
      </view>
    </view>
    <up-modal
      :show="groupNameShow"
      confirmText="修改"
      cancelText="取消"
      title="修改群聊名称"
      :showCancelButton="true"
      @cancel="groupNameShow = false"
      @confirm="GroupUpdateFn"
    >
      <up-input
        placeholder="請輸入群聊名称"
        border="surround"
        focus
        v-model="group_name"
      ></up-input>
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { GroupInfo, GroupUpdate, GroupExit, GroupDisband } from "@/api/ImApi";

const instance = getCurrentInstance()?.appContext.config.globalProperties;
// 是否是群主
let isGroupLeader = ref<boolean>(false);
let groupInfo = ref<any>({});
let myUserInfo = ref<any>({});

// 群详情
const getGroupDetails = async () => {
  myUserInfo.value = uni.getStorageSync("userInfo");
  const messages = await instance?.$db.loadData("chatList", {
    chatId: chatId.value,
  });
  groupInfo.value = messages[0];

  // 判断是否是群主
  isGroupLeader.value =
    myUserInfo.value.user_id === groupInfo.value.member[0].user_id;
  GroupInfo({ group_id: chatId.value }).then((e) => {
    groupInfo.value = {
      ...groupInfo.value,
      ...e,
    };
  });
};

// 置顶
let topChat = ref<boolean>(false);
const topChatChange = (e: any) => {};

// 消息免打扰
let messageWithoutInterruption = ref<boolean>(false);
const messageWithoutInterruptionChange = (e: any) => {};

// 修改群名称
let groupNameShow = ref<boolean>(false);
let group_name = ref<string>();
const GroupUpdateFn = async () => {
  if (!group_name.value) {
    uni.showToast({ title: "请输入群聊名称", icon: "none" });
    return;
  }

  await GroupUpdate({ group_id: chatId.value, group_name: group_name.value });
  groupNameShow.value = false;
  group_name.value = "";
  getGroupDetails();
};

// 跳转操作加减成员
const goInitiateGroupChat = async (type: number) => {
  const filteredMembers = groupInfo.value.member.filter(
    (member: any) => member.user_id !== myUserInfo.value.user_id
  );

  instance?.goTo(
    "/pages/group/initiateGroupChat?type=" +
      type +
      "&group_id=" +
      chatId.value +
      "&member=" +
      encodeURIComponent(JSON.stringify(filteredMembers))
  );
};

const GroupExitFn = async () => {
  uni.showModal({
    title: "温馨提示",
    content: "确认退出该群？",
    confirmText: "确认",
    cancelText: "取消",
    success: async (r) => {
      if (r.confirm) {
        await GroupExit(
          {
            group_id: chatId.value,
          },
          groupInfo.value
        );
        instance?.goBack(2, "退群成功");
      }
    },
  });
};
const GroupDisbandFn = async () => {
  uni.showModal({
    title: "温馨提示",
    content: "确认解散该群？",
    confirmText: "确认",
    cancelText: "取消",
    success: async (r) => {
      if (r.confirm) {
        await GroupDisband(
          {
            group_id: chatId.value,
          },
          groupInfo.value
        );

        instance?.goBack(2, "解散成功");
      }
    },
  });
};
let chatId = ref<any>();
onLoad((options) => {
  chatId.value = options?.chatId;
});
onShow(() => {
  getGroupDetails();
});
</script>
<style scoped lang="scss">
@import "../../static/scss/group.scss";
</style>
